<template>
  <div>
    <header class="main-header">
      <img class="main-avatar" src="@/assets/azheng66.png" />
      <div class="main-right">
        <div class="main-item" v-for="item in links" :key="item.index">
          <button
            :data-text="item.name"
            class="pan-btns"
            @click="goPath(item.path)"
          >
            {{ item.name }}
          </button>
        </div>
      </div>
    </header>
  </div>
</template>

<script>
export default {
  props: {
    links: {
      type: Array,
    },
  },
  data() {
    return {
      data() {
        return {};
      },
    };
  },
  methods: {
    goPath(val) {
      if (val == "/gitee") {
        window.open("https://gitee.com/zhengwei66");
      } else {
        this.$router.push(val);
      }
    },
  },
};
</script>

<style lang="scss">
.main-header {
  position: fixed;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 80px;
  padding: 0 60px;
  background-color: #2f3641;
  z-index: 2000;
}

.main-right {
  display: flex;
  margin-right: 100px;
}

.main-avatar {
  display: inline-block;
  width: 60px;
  height: 60px;
  border-radius: 5px;
  position: absolute;
  top: 50%;
  .main-item {
    .pan-btn {
      font-size: 14px;
      color: #fff;
      padding: 14px 36px;
      border-radius: 8px;
      border: none;
      outline: none;
      transition: 600ms ease all;
      position: relative;
      display: inline-block;

      &:hover {
        background: #fff;

        &:before,
        &:after {
          width: 100%;
          transition: 600ms ease all;
        }
      }

      &:before,
      &:after {
        content: "";
        position: absolute;
        top: 0;
        right: 0;
        height: 2px;
        width: 0;
        transition: 400ms ease all;
      }

      &::after {
        right: inherit;
        top: inherit;
        left: 0;
        bottom: 0;
      }
    }
  }
}
</style>
